//分享官账户明细
import React from 'react'
import { Tooltip } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import GoBack from '@/components/TheGoBack'
import TheQueryForm from '@/components/TheQueryForm';
import TheButton from '@/components/TheButton';
import { getDateTime3 } from '@/utils/getDate'
import { sharerBalanceDetails } from '@/request/distribution/sharerAccount.js'
import Json2Excel from '@/utils/Json2Excel'

import _ from 'lodash'

export default class SharerAccountParticulars extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      memberId: '',//用户主键id
      exportBtnLoading:false,
      searchOption: [
        { field: 'detailId', label: '业务编号', placeholder: '请输入订单号', type: 'Input', defaultValue: '' },
        {
          field: 'category', label: '收支类型', placeholder: '全部', type: 'Select',
          options: [
            { label: '全部', value: '' },
            { label: '收入', value: 0 },
            { label: '支出', value: 1 },
          ],
          defaultValue: ''
        },
        { field: 'times', label: '申请时间', placeholder: '请选择', type: 'RangePicker' },
      ],
      queryForm: {},
      columns: [
        {
          title: "业务编号",
          dataIndex: "detailId",
          key: "detailId",
        },
        {
          title: "订单编号",
          dataIndex: "orderCode",
          key: "orderCode",
          render: (text)=> {
            return text ?? '-'
          }
        },
        {
          title: "收支类型",
          dataIndex: "category",
          key: "category",
          render: (text) => {
            let category = ''
            switch (text) {
              case 0:
                category = '收入'
                break
              case 1:
                category = '支出'
                break
              default:
                category = '-'
            }
            return category
          }
        },
        {
          title: "明细",
          dataIndex: "detailType",
          key: "detailType",
          render: (text) => {
            let detailType = ''
            switch (text) {
              case 1:
                detailType = '月度奖励'
                break
              case 2:
                detailType = '拉新活动奖励'
                break
              case 3:
                detailType = '订单佣金'
                break
              case 4:
                detailType = '提现退回'
                break
              case 5:
                detailType = '提现支出 '
                break
              case 9:
                detailType = '其它支出 '
                break
              default:
                detailType = '-'
            }
            return detailType
          }
        },
        {
          title: "新人ID",
          dataIndex: "newMemberId",
          key: "newMemberId",
          render: (text)=> {
            return text ?? '-'
          }
        },
        {
          title: "时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "金额",
          dataIndex: "changeAmount",
          key: "changeAmount",
          render: (text, record) => {
            if (record.category === 1) {
              return '-' + React.$transNum(text || 0, 2, -2)
            } else if (record.category === 0) {
              return '+' + React.$transNum(text || 0, 2, -2)
            }
          }
        },
        {
          title: "变更后金额",
          dataIndex: "afterChangeBalance",
          key: "afterChangeBalance",
          render: (text) => {
            return React.$transNum(text || 0, 2, -2)
          }
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          render: (text) => {
            return <Tooltip title={text}>
              <span style={{ width: 200, display: 'block', margi9n: 'auto', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: "ellipsis" }}>{text}</span>
            </Tooltip>
          }
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      goBackFlag: false,//是否显示返回按钮
    }
  }
  componentDidMount() {
    let { id } = this.props.match.params
    if (id) {
      this.setState({ memberId: id }, () => {
        this.getData()
      })
    }
  }
  //分享官列表数据处理
  getData = async (values) => {
    let { pageData, memberId } = this.state
    if (values && !_.isEmpty(values.times)) {
      values.createStartTime = getDateTime3(values.times[0]) + ' 00:00:00'
      values.createEndTime = getDateTime3(values.times[1]) + ' 23:59:59'
      delete (values.times)
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      await sharerBalanceDetails({ ...pageData, ...this.state.queryForm, memberId }).then(res => {
        if (res.code === 0) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount
          })
        }
      })
    })
  }
  //分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData(this.state.queryForm)
    })
  }
  export = ()=>{
    let { pageData, memberId } = this.state

    this.setState({ exportBtnLoading: true }, async () => {
      let tB_data = []
      let res = await sharerBalanceDetails({ ...this.state.queryForm, memberId, pageNo: 1, pageSize: -1 })
      if (res.code === 0) {
        tB_data = res.data.map(item => {
          return {
            ...item,
            category:{0:'收入',1:'支出'}[item.category],
            detailType:{1:'月度奖励',2:'拉新活动奖励',3:'订单佣金',4:'提现退回',5:'提现支出',9:'其它支出'}[item.detailType],
            orderNumber: item.orderNumber || 0,//下单人数
            createTime: item.createTime || '-',
            remark:item.remark,
            changeAmount: React.$transNum(item.changeAmount || 0, 2, -2),
            afterChangeBalance: React.$transNum(item.afterChangeBalance || 0, 2, -2),
          }
        })
        const option = {
          header: [
            { prop: 'detailId', title: '业务编号', width: 25 },
            { prop: 'category', title: '收支类型', width: 15 },
            { prop: 'detailType', title: '明细', width: 15 },
            { prop: 'createTime', title: '时间', width: 15 },
            { prop: 'changeAmount', title: '金额', width: 15 },
            { prop: 'afterChangeBalance', title: '变更后金额', width: 25 },
            { prop: 'remark', title: '备注', width: 25 },
          ],
          dataSource: tB_data,
          fileName: '账户明细'
        }
        Json2Excel(option)
      }
    })
    this.setState({ exportBtnLoading: false })
  }
  //搜索
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  //搜索重置
  onReset() {
    this.setState({ queryForm: {} }, () => {
      this.pageChange(1, 10)
    })
  }
  render() {
    const { exportBtnLoading,columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, goBackFlag } = this.state
    return (
        <div className="p-layout-box">
          <GoBack history={this.props.history} title='账户明细'></GoBack>
          <div style={{marginBottom: 20}}></div>
          <TheQueryForm
              ref={(ref) => this.queryFormRef = ref}
              option={searchOption}
              show={true}
              onReset={() => this.onReset()}
              onGetValues={(values) => this.onFormSearch(values)}/>
          <div style={{marginBottom:'20px'}}>
            <TheButton haspermi={['distribution:sharerAssess:export']} size='middle' type='default' onClick={() => {
              this.export()
            }} loading={exportBtnLoading}>导出</TheButton>
          </div>
          <TheTable
              scroll={{x: "max-content", y: '63vh'}}
              columns={columns}
              dataSource={dataSource}
              rowKey={'userId'}
          />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange}/>
        </div>
    )
  }
}